<template>
	<view>
		<!-- 订单状态导航条 -->
		<scroll-view scroll-x class="bg-white nav solid-bottom">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==tabIndex?'text-orange cur':''" v-for="(item,index) in navList" :key="index" @tap="tabSelect" :data-id="index">
					{{item.label}}
				</view>
			</view>
		</scroll-view>
		
		<view style="height:110rpx;"></view>
		<!-- 订单列表 -->
		<view class="cu-card case bg-white margin-bottom-sm" @tap="navToDetail" :data-id="item" v-for="(item,index) of 10" :key="index">
			<!-- 订单号和时间 -->
			<view class="flex justify-between text-sm text-grey padding solid-bottom">
				<view class="">
					订单号：<text class="text-black">201216545</text>
				</view>
				<view class="action">
					2019-11-02 12:11
				</view>
			</view>
			<!-- 商品列表 -->
			<view class="cu-list menu-avatar" >
				<view class="cu-item" v-for="(good,good_index) of 2"  :key="good_index">
					<view class="cu-avatar radius lg" style="background-image:url(/static/images/logo.png);"></view>
					<view class="content">
						<view class="text-black"><view class="text-cut">星巢商品{{good}}</view></view>
						<view class="text-gray text-sm flex">
							<view class="text-cut">白色</view>
						</view>
					</view>
					<view class="action padding-right-sm">
						<view class="text-right"><text class="text-xs">￥</text>55</view>
						<view class="text-grey text-right text-xs">x5</view>
					</view>
				</view>
			</view>
			<!-- 统计金额 -->
			<view class="flex justify-end padding solid-bottom">
				共计2件商品，实付金额：<text class="text-xs">￥</text><text class="text-xl">55</text>
			</view>
			
			<!-- 操作按钮组 -->
			<view class="flex justify-end text-sm text-grey padding">
				<button class="cu-btn line-black sm margin-left-sm" @tap.stop="payOrder" data-id="good" >立即支付</button>
				<button class="cu-btn line-black sm margin-left-sm"  @tap.stop="cancelOrder" data-id="good">取消订单</button>
				<button class="cu-btn line-black sm margin-left-sm"  @tap.stop="pjOrder" data-id="good">评价</button>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex:0,
				scrollLeft:0,
				navList:[
					{
						status:-1,
						label:"全部"
					},
					{
						status:0,
						label:"待付款"
					},
					{
						status:1,
						label:"待发货"
					},
					{
						status:2,
						label:"待收货"
					},
					{
						status:3,
						label:"待评价"
					}
				],
				orderList:[]
			}
		},
		onLoad(opt) {
			if(opt.status){
				this.tabIndex = this.navList.findIndex((item,index)=>{
					return item.status == opt.status;
				})
			}
		},
		methods: {
			tabSelect(e) {
				
				this.tabIndex = e.currentTarget.dataset.id;

				uni.showToast({
					title:this.navList[this.tabIndex].label,
					icon:"none"
				})
				//this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			navToDetail(e){
				let order_id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: 'order_detail?order_id=${order_id}'
				});
			},
			//支付订单
			payOrder(e){
				uni.showToast({
					title:"支付订单",
					icon:"none"
				})
			},
			//取消订单
			cancelOrder(e){
				uni.showToast({
					title:"取消订单",
					icon:"none"
				})
			},
			//评价订单
			pjOrder(e){
				uni.showToast({
					title:"评价订单",
					icon:"none"
				})
			}
		}
	}
</script>

<style>
	.nav { position: fixed; z-index: 5;}
	.nav .cu-item{ position: relative; margin: 0;}
	.nav .cu-item.cur{ border-bottom: 0;}
	.nav .cu-item.cur::after{ content: ""; border-bottom: 2px solid #f37b1d; width: 40px; position: absolute; bottom:0; left:50%; margin-left: -20px;}
</style>
